<template>

<el-dialog
        :model-value="dialogVisible"
        :width="900"
        :align-center="true"
        @close="cancel"
        @open="open_dialog"
        :destroy-on-close="true"
    >
    <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template>

    <div class="body_all">
              <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        height="100%"
    >

        <el-table-column :align="'center'" show-overflow-tooltip :property="col.property" :label="col.label" v-for="col,index in table_column"></el-table-column>
      
        <el-table-column  :align="'center'" width="155" property="is_active" label="操作">
            <template #default="scope">
              <div class="table__oper">
                <div>
                  <el-button @click="delete_data(scope.row )" type="danger">删除</el-button>
                </div>
                <div>
                  <el-button type="primary" @click="open_operate('update', scope.row)">修改</el-button>
                </div>
              </div>

            </template>
          </el-table-column>
      </el-table>
      <div class="bottom__page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />  

      </div>
    </div>

    <div class="dialog__bottom">
        <div>
            <!-- <el-button type="danger" plain @click="cancel">删除</el-button> -->
            <el-button type="primary" plain @click="open_operate('create')">新增</el-button>
        </div>
    </div>
    
</el-dialog>

<AddMemberShipDialog
    @confirm="confirm"
    @cancel="add_cancel"
    :visible="isVisible"
    :title="dialog_title"
    :instance="update_instance"
></AddMemberShipDialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
import { getUserMemberShip, createUserMemberShip, editUserMemberShip, deleteUserMemberShip } from '@/api/manage.js'
import AddMemberShipDialog from './AddMemberShipDialog.vue'
import { formatDateTime } from '@/utils/util.js'
import MessageBox from '@/utils/MessageBox';

const props = defineProps(['visible', "title", "instance"])
const emit = defineEmits(['cancel', 'confirm'])
const formRef = ref(null);
const dialogVisible = ref(props.visible)

const isVisible = ref(false)
const dialog_title = ref('新增套餐')
const update_instance = ref({})
const click_oprate = ref('create')

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const table_column = ref([
        {'label': 'ID', 'property': 'id'},
        {'label': '总点数', 'property': 'total'},
        {'label': '已使用', 'property': 'use_number'},
        {'label': '任务数', 'property': 'task_num'},
        {'label': '优先级', 'property': 'priority'},
        {'label': '等级', 'property': 'grade'},
        {'label': '开始时间', 'property': 'start_time'},
        {'label': '过期时间', 'property': 'expire_time'},
    ])

watch(() => props.visible, (value) => value && (dialogVisible.value = true))

const data_obj = ref(props.instance)
watchEffect(() => data_obj.value = props.instance)


const rules = {
    name:[
    { required: true, message: "请输入名字", trigger: 'blur' },
    ],
    
}

const getDataList = async ()=>{

    var req_data = {
        user_id: props.instance.id,
        page: currentPage.value,
        page_size: pageSize.value
    }
    var res = await getUserMemberShip(req_data)

    tableData.value = res.list
    total.value = res.total
}

// 改变页面大小
function handleSizeChange(newSize){
    // console.log(newSize)
    pageSize.value = newSize
    getDataList()
}

// 改变页码
function handleCurrentChange(newPage){
    // console.log(newPage)
    currentPage.value = newPage
    getDataList
}

const add_cancel = ()=>{
    isVisible.value = false
    update_instance.value = {}
}

async function confirm(value){
    // console.log('----', value)
    if (click_oprate.value == "update"){
        var req_data = {
            id: value.id,
            data:{
                user_id: data_obj.value.id,
                total: value.total,
                task_num: value.task_num,
                priority: value.priority,
                grade: value.grade,
            }
        }

        if (value.range_date){
            req_data.data.start_time = value.range_date[0]
            req_data.data.expire_time = value.range_date[1]
        }

        var res = await editUserMemberShip(req_data)
        MessageBox.success('修改成功！')
    }else{
        var req_data = {
            user_id: data_obj.value.id,
            total: value.total,
            task_num: value.task_num,
            priority: value.priority,
            grade: value.grade,
        }
        if (value.range_date){
            req_data.start_time = value.range_date[0]
            req_data.expire_time = value.range_date[1]
        }
        var res = await createUserMemberShip(req_data)
        getDataList()
        MessageBox.success('新增成功！')
    }
    


}

// 操作数据按钮
function open_operate(operate_type, edit_data={}){
    click_oprate.value = operate_type
    if (operate_type == "update"){  
        update_instance.value = edit_data
        dialog_title.value = '修改套餐'
        if(edit_data.start_time){
            update_instance.value.range_date = [edit_data.start_time, edit_data.expire_time]
        }
        

    }else{
        dialog_title.value = '新增套餐'
        update_instance.value = {
            total: 50,
            task_num: 1,
            priority: 5,
            grade: 1
        }
    }

    isVisible.value = true
}

// 删除数据
function delete_data(row){
    var req_data = {
        id: [row.id]
    }
    deleteUserMemberShip(req_data)
    getDataList()
    MessageBox.success('删除成功！')
}

function cancel(){
    emit('cancel')
    dialogVisible.value = false
    data_obj.value = {}
}

function open_dialog(){
    getDataList()
}


onMounted(()=>{
    
})



</script>

<style lang="scss">
.data__input{
    padding: 0 20px 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .el-form{
        .el-form-item{
            .el-form-item__label{
                width: 30%;
            }
        }
    }
    
}
.dialog__bottom{
    width: 100%;
    padding: 10px 10px 0 0;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}

.table__oper{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.body_all{
    height: 500px;
}
.bottom__page{
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>









